<template>
  <div class="min-h-screen bg-gray-50">


    <div class="max-w-7xl mx-auto px-4 py-8">
      <div class="grid grid-cols-3 gap-8">
        <div class="col-span-2">
          <div class="bg-white p-6 rounded-lg shadow-md">
            <div class="flex items-center justify-between mb-6">
              <div class="flex items-center">
                <h2 class="text-xl font-bold">{{ data?.exercise_text }}</h2>
              </div>

            </div>

            <div class="space-y-6">
              <div class="bg-gray-50 p-6 rounded-lg">
                <div class="space-y-6">
                  <div class="bg-green-50 p-4 rounded-lg mb-4">
                    <div class="flex items-center">
                      <i class="fas fa-check-circle text-green-500 text-xl mr-2"></i>
                      <span class="text-green-700 font-medium">答案は提出できました!</span>
                    </div>
                  </div>
                  <h3 class="font-medium mb-4">あなたの解答</h3>
                  <div class="p-4 border border-gray-200 rounded-lg bg-gray-50">
                    <p class="text-gray-700 whitespace-pre-line">{{ data?.user_answer }}</p>
                  </div>
                  <div class="mt-6">
                    <h3 class="font-medium mb-4">AIによる解析</h3>
                    <div class="space-y-4">
                      <div class="p-4 bg-custom bg-opacity-5 rounded-lg">
                        <Voice v-if="url" :ref="'voice' + index" :id="index" :url="url"></Voice>
                        <h4 class="font-medium text-custom mb-2"
                          style="display: inline-block;margin-left: .5rem;position: relative;bottom: .3rem;">解法の考え方</h4>
                        <p class="text-gray-700">{{ data?.solution_idea }}</p>
                      </div>
                      <div class="p-4 bg-gray-50 rounded-lg">
                        <h4 class="font-medium mb-2">詳細証明</h4>
                        <div class="space-y-3">
                          <p class="text-gray-700" v-for="(item, index) in data?.detailed_proof" :key="index">{{ item }}
                          </p>

                        </div>
                      </div>
                      <div class="p-4 bg-yellow-50 rounded-lg">
                        <h4 class="font-medium text-yellow-800 mb-2">重要な知識ポイント</h4>
                        <ul class=" list-inside space-y-2 text-gray-700">
                          <li v-for="(item, index) in data?.key_knowledge" :key="index">{{ item }}</li>

                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="flex justify-between mt-6">
                  <button class="px-6 py-2 text-custom hover:bg-custom hover:text-white border border-custom rounded-lg"
                    @click="reset_question">
                    <i class="fas fa-redo mr-2"></i>改めて回答
                  </button>
                  <button class="px-6 py-2 bg-custom text-white rounded-lg hover:bg-opacity-90" @click="toNext"
                    v-if="count < 9 && !hidden">
                    <i class="fas fa-arrow-right mr-2"></i> 次の問題
                  </button>
                  <button class="px-6 py-2 bg-custom text-white rounded-lg hover:bg-opacity-90" @click="getScore"
                    v-else-if="count >= 9 && !hidden">
                    <i class="fas fa-arrow-right mr-2"></i> スコア
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="space-y-6">

          <div class="bg-white p-6 rounded-lg shadow-md h-fit">
            <h3 class="text-lg font-medium mb-4">学習データ</h3>
            <div class="space-y-6">
              <div class="p-4 bg-gray-50 rounded-lg">
                <h4 class="font-medium text-sm mb-3">今週の勉強の概要</h4>
                <div class="space-y-2">
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">完成したの問題数</span>
                    <span class="font-medium">{{ count_total?.completed_tasks }}</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">今週の正解率</span>
                    <span class="font-medium">{{ count_total?.correctness_rate }}%</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">今週の達成率</span>
                    <span class="font-medium">{{ count_total?.completion_rate }}%</span>
                  </div>
                  <!-- <div class="flex justify-between text-sm">
                    <span class="text-gray-600">今週の勉強時間</span>
                    <span class="font-medium">{{ roundMinutes(count_total?.total_study_time) }}{{
                      isMinuteOrHour(roundMinutes(count_total?.total_study_time)) }}</span>
                  </div> -->
                </div>
              </div>


            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Speech from 'speak-tts'

import { get,post } from "@/http/axios"
import Voice from '@/components/voice.vue';
export default {
  name: 'MathHelper',
  components: {
    Voice
  },
  data() {
    return {
      hidden: false,
      paly_flag: false,
      count: 0,
      url:"",
      speech: null,
      count_total: {},
      total_count: 0,
      speech: null,
      data: {
        "branch_id": null,
        "category_id": null,
        "created_at": null,
        "detailed_proof": null,
        "exercise_id": null,
        "exercise_text": null,
        "id": null,
        "is_correct": null,
        "key_knowledge": [
        ],
        "solution_idea": null,
        "updated_at": null
      },
    }
  },

  mounted() {
    this.$nextTick(async () => {
      this.count = this.$route.query.count;
      this.total_count = this.$route.query.totalCount;
      let data = JSON.parse(sessionStorage.getItem('answer'));
      this.data = data;
      if(data?.url){
        this.url = data.url
      }else{
        await this.getAudioUrl()
      }
    })
    if (this.$route.query.detail) {
      this.hidden = true
    }
    this.getCunts();
  },
  methods: {
    async getAudioUrl() {
            let data = await get("/getAudioUrl?exercise_id=" + this.data?.exercise_id)
            this.url = data.data.data
    },

    reset_question() {
      if (this.hidden) {
        this.$router.replace({ path: "/exercise", query: { answer_id: this.data?.id, exercise_id: this.data?.exercise_id, id: this.data?.category_id, branch_id: this.data?.branch_id, hidden: true } })
      } else {
        this.$router.replace({ path: "/exercise", query: { answer_id: this.data?.id, exercise_id: this.data?.exercise_id, id: this.data?.category_id, branch_id: this.data?.branch_id } })
      }
    },
    roundMinutes(minutes) {
      return Math.round(minutes);
    },
    isMinuteOrHour(value) {
      // 处理负数和非整数情况
      if (value < 0 || !Number.isInteger(value)) {
        return '無効な入力は、非負の整数を入力してください';
      }

      // 处理分钟
      if (value >= 0 && value < 60) {
        return '分';
      }

      // 处理小时，包括超过23小时但小于48小时的情况
      if (value >= 0 && value <= 23) {
        return '時間';
      } else if (value > 23 && value <= 47) {
        // 将超过24小时但小于48小时的值转换为0-23的范围
        value = value - 24;
        return '時間';
      } else if (value > 47 && value <= 71) {
        value = value - 48;
        return '時間';
      } else {
        return '時間や分の値は有効ではありません';
      }
    },
    async getCunts() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let data = await get("/get_week_success_task")
      loading.close()
      this.count_total = data.data.data
    },
    getScore() {
      this.$router.replace({ path: "/suceesView", query: { branch_id: this.data.branch_id } })
    },
    toNext() {
      this.$router.replace({ path: "/exercise", query: { id: this.data.category_id, next: true, branch_id: this.data.branch_id } })
    }
  }
};
</script>

<style scoped>
.voice_wrap.small{
  margin-bottom: .6rem !important;
}
/* Add any scoped styles here */
</style>
